<template>
  <div class="wainting-nodel">
    <!-- 搜索表单 -->
    <div class="search-wrap">
      <SearchForm :list="[...formList]" @submit="search" @reset="reset"></SearchForm>
    </div>

    <el-tabs v-model="activeName" style="position: sticky; top: 0px; z-index: 2" @tab-change="search(formData)">
      <el-tab-pane :label="'等待建模（' + total.waiting + '）'" name="1"></el-tab-pane>
      <el-tab-pane :label="'建模完成（' + total.finish + '）'" name="2"></el-tab-pane>
    </el-tabs>

    <waiting
      ref="waitingRef"
      v-show="activeName === '1'"
      :formData="formData"
      @getTotal="
        total => {
          getTotal(total, '1');
        }
      "
      @resetList="resetList('2')"
    />
    <finish
      ref="finishRef"
      v-show="activeName === '2'"
      :formData="formData"
      @getTotal="
        total => {
          getTotal(total, '2');
        }
      "
      @resetList="resetList('1')"
    />
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from "vue";
import SearchForm from "@/components/SearchForm";
import waiting from "./components/waiting.vue";
import finish from "./components/finish.vue";

const formList = ref([
  {
    label: "商品ID",
    model: "productId",
    type: "input",
    labelWidth: "70"
  },
  {
    label: "SKU编码",
    model: "skuId",
    type: "input",
    labelWidth: "70"
  },
  {
    label: "创建日期",
    model: "createTime",
    type: "daterange",
    labelWidth: "70"
  }
]);
const activeName = ref("1");
const formData = ref({});
const waitingRef = ref();
const finishRef = ref();
const total = ref({ waiting: 0, finish: 0 });

onMounted(() => {
  search("");
  finishRef.value.getList(); //初始查询建模完成的数据list
});

//刷新另外一组list列表
const resetList = type => {
  if (type === "1") {
    waitingRef.value.getList();
  } else if (type === "2") {
    finishRef.value.getList();
  }
};

//获取tabs 等待建模、完成建模的总数
const getTotal = (_total, type) => {
  if (type === "1") {
    total.value.waiting = _total;
  } else if (type === "2") {
    total.value.finish = _total;
  }
};

// 查询数据列表
const getList = () => {
  if (activeName.value === "1") {
    waitingRef.value.getList();
  } else if (activeName.value === "2") {
    finishRef.value.getList();
  }
};

// 表单查询组件submit回调
const search = form => {
  console.log("查询表单数据===", form);
  if (form) {
    let _form = JSON.parse(JSON.stringify(form));
    _form.startDate = form?.createTime ? form?.createTime[0] : null;
    _form.endDate = form?.createTime ? form?.createTime[1] : null;
    delete _form?.createTime;
    formData.value = _form;
  } else {
    formData.value = {};
  }
  nextTick(() => {
    getList();
  });
};
//清空查询表单
const reset = () => {
  search("");
};
</script>

<style lang="scss" scoped>
.wainting-nodel {
  padding: 0 20px;
  height: calc(100% - 0px);
  overflow-y: auto;
  :deep(.el-tabs__nav-scroll) {
    background-color: white;
    padding-top: 20px;
  }
  .search-wrap {
    overflow: hidden;
    padding: 20px;
    background-color: #f6f8fa;
    margin-top: 20px;
  }
}
</style>
